﻿<template>
  <footer class="footer">
    <div class="footer-grid">
      <section>
        <h4>薄荷健康</h4>
        <p>你的智能健康助理，提供科学减脂、营养食谱和行为训练支持。</p>
      </section>
      <section>
        <h5>快速导航</h5>
        <ul>
          <li><RouterLink to="/recipes">饮食方案</RouterLink></li>
          <li><RouterLink to="/guides">健康指南</RouterLink></li>
        </ul>
      </section>
      <section>
        <h5>联系我们</h5>
        <p>邮箱：hello@mint.com</p>
        <p>合作：bd@mint.com</p>
      </section>
    </div>
    <div class="footer-extra">
      <span>© {{ currentYear }} Mint Health. All rights reserved.</span>
      <span>浙ICP备10224580号-1</span>
    </div>
  </footer>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { RouterLink } from "vue-router";

const currentYear = computed(() => new Date().getFullYear());
</script>

<style scoped>
.footer {
  background: #0f2c2b;
  color: #d7f2f1;
  padding: 48px 32px 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  margin-bottom: 24px;
}

h4,
h5 {
  margin: 0 0 12px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  margin-bottom: 8px;
}

.footer-extra {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  opacity: 0.8;
}

@media (max-width: 640px) {
  .footer-extra {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }
}
</style>
